<template>
  <view class="device-page">
    <!-- 顶部标题 -->
    <view class="page-header">
      <text class="title">添加心中设备</text>
    </view>

    <!-- 设备信息表单 -->
    <view class="device-form">
      <!-- 设备类型选择 -->
      <view class="form-item">
        <text class="label">设备类型</text>
        <picker 
          class="picker" 
          :range="deviceTypes" 
          :value="deviceTypeIndex" 
          @change="onDeviceTypeChange"
        >
          <view class="picker-text">
            {{ deviceTypeIndex !== -1 ? deviceTypes[deviceTypeIndex] : '请选择设备类型' }}
            <wd-icon name="arrow-down" size="20px" color="#999"></wd-icon>
          </view>
        </picker>
      </view>

      <!-- 设备名称输入 -->
      <view class="form-item">
        <text class="label">设备名称</text>
        <input 
          class="input" 
          v-model="deviceName" 
          placeholder="请输入设备名称（必填）"
          maxlength="50"
        />
      </view>

      <!-- 设备序列号输入 -->
      <view class="form-item">
        <text class="label">设备序列号</text>
        <input 
          class="input" 
          v-model="serialNumber" 
          placeholder="请输入设备序列号（必填）"
          maxlength="30"
        />
      </view>

      <!-- 设备长者输入 -->
      <view class="form-item">
        <text class="label">设备长者</text>
        <input 
          class="input" 
          v-model="deviceOwner" 
          placeholder="请输入设备长者姓名（必填）"
          maxlength="20"
        />
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn" @click="handleSubmit">
        <text class="btn-text">确认添加</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 设备类型选项（可根据实际需求扩展）
const deviceTypes = ref(['智能手环', '健康监测仪', '智能血压计', '血糖仪', '制氧机'])

// 表单数据
const deviceTypeIndex = ref(-1) // 选中的设备类型索引
const deviceName = ref('')       // 设备名称
const serialNumber = ref('')     // 设备序列号
const deviceOwner = ref('')      // 设备长者

// 设备类型选择回调
const onDeviceTypeChange = (e) => {
  deviceTypeIndex.value = e.detail.value
}

// 表单验证
const validateForm = () => {
  if (deviceTypeIndex.value === -1) {
    uni.showToast({ title: '请选择设备类型', icon: 'none', duration: 2000 })
    return false
  }
  if (!deviceName.value.trim()) {
    uni.showToast({ title: '请填写设备名称', icon: 'none', duration: 2000 })
    return false
  }
  if (!serialNumber.value.trim()) {
    uni.showToast({ title: '请填写设备序列号', icon: 'none', duration: 2000 })
    return false
  }
  if (!deviceOwner.value.trim()) {
    uni.showToast({ title: '请填写设备长者姓名', icon: 'none', duration: 2000 })
    return false
  }
  return true
}

// 提交表单
const handleSubmit = () => {
  if (!validateForm()) return

  // 构造提交数据
  const formData = {
    type: deviceTypes.value[deviceTypeIndex.value],
    name: deviceName.value.trim(),
    sn: serialNumber.value.trim(),
    owner: deviceOwner.value.trim()
  }

  // 模拟提交请求（实际替换为 uni.request）
  uni.showLoading({ title: '提交中...', mask: true })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '设备添加成功', icon: 'success', duration: 2000 })
    // 清空表单
    deviceTypeIndex.value = -1
    deviceName.value = ''
    serialNumber.value = ''
    deviceOwner.value = ''
  }, 1500)
}
</script>

<style lang="less" scoped>
	@import url("@/static/styles/colors.less");
.device-page {
  padding: 32rpx 24rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.5rpx;
  }
}

.device-form {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.form-item {
  margin-bottom: 40rpx;
  
  .label {
    display: block;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 16rpx;
  }
}

/* 设备类型选择器 */
.picker {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s;
  
  &:active {
    border-color: #ff7d00;
  }
}

.picker-text {
  font-size: 28rpx;
  color: #333;
}

/* 输入框样式 */
.input {
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
  color: #333;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 16rpx;
  box-sizing: border-box;
  transition: border-color 0.2s;
  
  &:focus {
    border-color: #ff7d00;
    outline: none;
  }
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: @color-primary;
  border-radius: 44rpx;
  margin-top: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  
  &:active {
    background: #e66a00;
    transform: scale(0.98);
  }
}

.btn-text {
  font-size: 32rpx;
  color: #fff;
  font-weight: 500;
}
</style>